<template>
    <div>


        <el-container>

            <!--            侧边栏-->
            <el-aside :width="asideWith" style="min-height: 100vh;background: #001529;">
                <!--                min-height：100vh   表示 这个侧边导航栏的最小高度为整个页面的高度    vh表示单位   也就是将页面的高度分为100等份vh，这个侧边栏占100份-->

                <div style="height: 60px; line-height: 60px; display: flex;align-content: center;justify-content: center">
                    <img v-show="!isCollapse" src="../assets/logo_long.png" alt="LOGO"
                         style="margin: 10px 10px;border-radius: 10px">
                    <img v-show="isCollapse" src="../assets/logo_short.png" alt="LOGO"
                         style="margin: 10px 10px;border-radius: 100px">
                    <!--                 v-show="ture / false"  设置这个元素是否展示 -->
                </div>


                <el-menu :collapse="isCollapse" :collapse-transition="false" router style="border: none;"
                         background-color="#001529" text-color="rgba(255, 255, 255, 0.65)"
                         active-text-color="#fff"
                         :default-active="$route.path">
                    <!--                    default-active   用来  高亮  当前页面   的   侧边栏选项                -->
                    <!--                    $route.path     用来  获取   当前页面的    路径                -->
                    <!--                    router          当点击侧边栏选项时，  会根据它的index    进行跳转页面       -->
                    <!--                    background-color    用来  设置    菜单栏的       背景颜色           -->
                    <!--                    text-color    用来  设置    菜单栏的    文字的颜色           -->
                    <!--                    active-text-color    用来  设置    菜单栏中    选项 被选中时的    文字的颜色           -->
                    <!--                    :collapse="isCollapse"     用来  设置    菜单栏的   收缩开关             -->
                    <!--                    :collapse-transition="false"    用来  设置    菜单栏中 收缩效果   false  表示不显示收缩过程          -->


                    <!--                    <el-submenu index="">-->

                    <!--                        <template slot="title">-->
                    <!--                            <i class="el-icon-menu"></i>-->
                    <!--                            <span>系统管理</span>-->
                    <!--                        </template>-->

                    <!--                    </el-submenu>-->


                    <el-submenu index="system">

                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>系统管理</span>
                        </template>

                        <el-menu-item index="/manager/home">
                            <template>
                                <i class="el-icon-house"></i>
                                <span>系统首页</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="/manager/systemNotice">
                            <template>
                                <i class="el-icon-news"></i>
                                <span>系统公告</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="/manager/carousel">
                            <template>
                                <i class="el-icon-s-grid"></i>
                                <span>轮播图管理</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="/manager/blockedWord">
                            <template>
                                <i class="el-icon-message-solid"></i>
                                <span>屏蔽词管理</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>


                    <el-menu-item index="/manager/data">
                        <template>
                            <i class="el-icon-s-data"></i>
                            <span>数据展示</span>
                        </template>
                    </el-menu-item>


                    <el-menu-item index="/manager/user">
                        <template>
                            <i class="el-icon-user"></i>
                            <span>用户信息</span>
                        </template>
                    </el-menu-item>

                    <!--                    <el-submenu index="user">

                                            <template slot="title">
                                                <i class="el-icon-user-solid"></i>
                                                <span>用户管理</span>
                                            </template>

                                            <el-menu-item index="/manager/user">
                                                <template>
                                                    <i class="el-icon-user"></i>
                                                    <span>用户信息</span>
                                                </template>
                                            </el-menu-item>

                                            &lt;!&ndash;                        <el-menu-item index="/manager/userAnalytics">
                                                                        <template>
                                                                            <i class="el-icon-data-analysis"></i>
                                                                            <span>用户分析</span>
                                                                        </template>
                                                                    </el-menu-item>&ndash;&gt;

                                        </el-submenu>-->

                    <el-menu-item index="/manager/store">
                        <template>
                            <i class="el-icon-s-custom"></i>
                            <span>商家信息</span>
                        </template>
                    </el-menu-item>


                    <el-menu-item index="/manager/withdrawal">
                        <template>
                            <i class="el-icon-money"></i>
                            <span>提现管理</span>
                        </template>
                    </el-menu-item>

                    <!--                    <el-submenu index="store">

                                            <template slot="title">
                                                <i class="el-icon-s-custom"></i>
                                                <span>商家管理</span>
                                            </template>

                                            <el-menu-item index="/manager/store">
                                                <template>
                                                    <i class="el-icon-s-custom"></i>
                                                    <span>商家信息</span>
                                                </template>
                                            </el-menu-item>


                                            <el-menu-item index="/manager/withdrawal">
                                                <template>
                                                    <i class="el-icon-money"></i>
                                                    <span>提现管理</span>
                                                </template>
                                            </el-menu-item>

                                            &lt;!&ndash;                        <el-menu-item index="/manager/storeAnalytics">
                                                                        <template>
                                                                            <i class="el-icon-data-analysis"></i>
                                                                            <span>商家分析</span>
                                                                        </template>
                                                                    </el-menu-item>&ndash;&gt;

                                        </el-submenu>-->

                    <el-menu-item index="/manager/product">
                        <template>
                            <i class="el-icon-goods"></i>
                            <span>商品信息</span>
                        </template>
                    </el-menu-item>

                    <el-menu-item index="/manager/category">
                        <template>
                            <i class="el-icon-document"></i>
                            <span>商品分类信息</span>
                        </template>
                    </el-menu-item>

                    <!--                    <el-submenu index="product">

                                            <template slot="title">
                                                <i class="el-icon-s-goods"></i>
                                                <span>商品管理</span>
                                            </template>

                                            <el-menu-item index="/manager/product">
                                                <template>
                                                    <i class="el-icon-goods"></i>
                                                    <span>商品信息</span>
                                                </template>
                                            </el-menu-item>

                                            <el-menu-item index="/manager/category">
                                                <template>
                                                    <i class="el-icon-document"></i>
                                                    <span>商品分类信息</span>
                                                </template>
                                            </el-menu-item>

                                            &lt;!&ndash;                        <el-menu-item index="/manager/productAnalytics">
                                                                        <template>
                                                                            <i class="el-icon-data-analysis"></i>
                                                                            <span>商品分析</span>
                                                                        </template>
                                                                    </el-menu-item>&ndash;&gt;

                                        </el-submenu>-->

                    <el-menu-item index="/manager/orders">
                        <template>
                            <i class="el-icon-tickets"></i>
                            <span>订单信息</span>
                        </template>
                    </el-menu-item>
                    <!--                    <el-submenu index="orders">

                                            <template slot="title">
                                                <i class="el-icon-s-order"></i>
                                                <span>订单管理</span>
                                            </template>

                                            <el-menu-item index="/manager/orders">
                                                <template>
                                                    <i class="el-icon-tickets"></i>
                                                    <span>订单信息</span>
                                                </template>
                                            </el-menu-item>

                                            &lt;!&ndash;                        <el-menu-item index="/manager/ordersAnalytics">
                                                                        <template>
                                                                            <i class="el-icon-data-analysis"></i>
                                                                            <span>订单分析</span>
                                                                        </template>
                                                                    </el-menu-item>&ndash;&gt;

                                        </el-submenu>-->
                    <el-menu-item index="/manager/comment">
                        <template>
                            <i class="el-icon-s-comment"></i>
                            <span>评论信息</span>
                        </template>
                    </el-menu-item>
                    <!--                    <el-submenu index="comment">

                                            <template slot="title">
                                                <i class="el-icon-reading"></i>
                                                <span>评论管理</span>
                                            </template>

                                            <el-menu-item index="/manager/comment">
                                                <template>
                                                    <i class="el-icon-s-comment"></i>
                                                    <span>评论信息</span>
                                                </template>
                                            </el-menu-item>

                                        </el-submenu>-->


                    <!--                    下面这个是二级菜单栏      -->

                    <!--                    <el-submenu index="">-->

                    <!--                        <template slot="title">-->
                    <!--                            <i class="el-icon-menu"></i>-->
                    <!--                            <span>信息管理</span>-->
                    <!--                        </template>-->

                    <!--                        <el-menu-item index="/manager/user">-->
                    <!--                            <template>-->
                    <!--                                <i class="el-icon-user"></i>-->
                    <!--                                <span>用户信息</span>-->
                    <!--                            </template>-->
                    <!--                        </el-menu-item>-->

                    <!--                        <el-menu-item index="/manager/store">-->
                    <!--                            <template>-->
                    <!--                                <i class="el-icon-s-custom"></i>-->
                    <!--                                <span>商家信息</span>-->
                    <!--                            </template>-->
                    <!--                        </el-menu-item>-->

                    <!--                        <el-menu-item index="/manager/product">-->
                    <!--                            <template>-->
                    <!--                                <i class="el-icon-goods"></i>-->
                    <!--                                <span>商品信息</span>-->
                    <!--                            </template>-->
                    <!--                        </el-menu-item>-->

                    <!--                        <el-menu-item index="/manager/category">-->
                    <!--                            <template>-->
                    <!--                                <i class="el-icon-tickets"></i>-->
                    <!--                                <span>商品分类信息</span>-->
                    <!--                            </template>-->
                    <!--                        </el-menu-item>-->

                    <!--                        <el-menu-item index="/manager/orders">-->
                    <!--                            <template>-->
                    <!--                                <i class="el-icon-s-order"></i>-->
                    <!--                                <span>订单信息</span>-->
                    <!--                            </template>-->
                    <!--                        </el-menu-item>-->

                    <!--                    </el-submenu>-->


                </el-menu>


            </el-aside>


            <el-container>

                <!--                顶部-->
                <el-header>

                    <!--                    收缩图标    -->
                    <i :class="collapseIcon" style="font-size: 26px; margin:15px 0" @click="handleCollapse"></i>

                    <!--                    面包屑       -->
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:20px 20px">

                        <el-breadcrumb-item
                                v-for="(item,index) in breadList"
                                :key="index"
                                :to="{ path: item.path }"
                        >{{ item.meta.title }}
                        </el-breadcrumb-item>

                        <!--                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
                        <!--                        <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>-->

                    </el-breadcrumb>


                    <div style="flex:1; width : 0; display: flex; align-items: center; justify-content: flex-end">
                        <!--                        全屏按钮      -->
                        <i class="el-icon-quanping" style="font-size: 26px;margin-right: 10px" @click="handleFull"></i>


                        <!--                    头像 + 身份信息  +  自动下拉选项    -->
                        <el-dropdown>
                            <div style="display: flex;align-items: center;justify-content: center; cursor: default">
                                <img style="border-radius: 50px;margin-right: 10px" :src="account.avatar" alt=""
                                     width="40px" height="40px">
                                <span style="margin-left: 5px">{{ account.name }}</span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="showPersonalCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item @click.native="showChangePassword">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>


                </el-header>

                <!--        主体区域-->
                <el-main>
                    <!--                    通过 router-view 标签实现动态显示主题内容   -->
                    <router-view/>

                </el-main>

            </el-container>

        </el-container>
    </div>
</template>

<script>

import crypto from "@/utils/encryp";

export default {
    name: 'HomeView',
    data() {
        return {
            isCollapse: false,  // 菜单栏   默认不收缩
            asideWith: '210px', // 侧边栏宽度
            collapseIcon: 'el-icon-s-fold',    // 收缩图标
            dialogFormVisible_edit: false,    // 弹出框
            avatarUrl: '',       // 暂存后台传回来的图片链接
            form_user: {},      // 存储编辑用户信息的对象
            users: [],           // 存储后台获取到的用户信息
            account: {},         // 存储当前登录的用户数据
            breadList: [],      // 路由集合

        }
    },

    mounted() {
        // 页面加载时实现的方法
        // 第一种写法
        // axios.get("http://localhost:9090/user/selectAll").then(res => {
        //     this.users = res.data.data;
        // })

        // 第二种写法
        // this.$request.get('/user/selectAll').then(res => {
        //     this.users = res.data;    // 这里一个.data就够了，因为request封装res = request.data了
        // })

        this.account = JSON.parse(localStorage.getItem('account'))

    },

    watch: {
        $route() {
            this.getBreadcrumb();
        }
    },

    methods: {

        getBreadcrumb() {
            let matched = this.$route.matched;
            this.breadList = matched;
            // console.log(this.breadList)
            // console.log(this.breadList[1].path)
            // console.log(this.breadList[1].meta.title)
        },


        // 处理  展示个人中心  的点击事件
        showChangePassword() {
            // 跳转到  修改密码页面
            this.$router.push('/manager/changePassword')
        },


        // 处理  展示个人中心  的点击事件
        showPersonalCenter() {
            // 跳转到  个人中心页面
            this.$router.push('/manager/personalCenter')
        },


        // 处理 头像上传按钮   的点击事件
        handleFileUpload(response, file, fileList) {
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址

            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.avatarUrl = url;
        },


        // 处理 删除按钮  点击事件
        handleDeleteButton(user) {
            // 弹出提示框弹出提示框
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送请求到后端删除用户
                this.$request.delete('/user/delete/' + user.id).then(res => {
                    // 判断是否删除成功
                    if (res.code === '200') {
                        // 删除成功，重新加载页面
                        // 这样可以起到实时更新用户信息的作用
                        this.getAllUsers()
                        // 提示删除成功
                        this.$message.success("删除成功！")
                    } else {
                        // 提示返回的错误信息
                        this.$message.error(res.msg)
                    }
                })
            }).catch(() => {
                // 取消删除，不用做任何事
                this.$message.info("已取消删除！")
            })
        },

        // 处理 取消弹窗按钮的 点击事件
        cancelDialog() {
            // 关闭弹框
            this.dialogFormVisible_edit = false
            // 清空from缓存
            this.form_user = {}
            // 清空avatarUrl缓存
            this.avatarUrl = ''
        },


        // 处理 弹窗确认按钮  的点击事件
        handleEdit() {
            // console.log(this.form_user)
            // 更新表单中的数据
            this.form_user.avatar = this.avatarUrl

            // 将被更改的用户信息from_user 更新请求到后端
            this.$request.put('/user/update', this.form_user).then(res => {
                //  判断是否更新成功
                if (res.code === '200') {
                    // 更新成功，重新从后端获取用户信息
                    this.getAllUsers()
                    // 提示修改成功
                    this.$message.success('修改成功！')
                    // 清空from缓存
                    this.form_user = {}
                    // 清空avatarUrl缓存
                    this.avatarUrl = ''
                } else {
                    // 提示报错信息
                    this.$message.error(res.msg)
                }
            })
            // 关闭弹窗
            this.dialogFormVisible_edit = false
        },


        // 处理 编辑按钮 点击时的相应事件
        handleEditButton(user) {
            // 打开弹窗
            this.dialogFormVisible_edit = true
            // 把用户信息存储到form_user对象中
            this.form_user = user
            // console.log(this.form_user)
        },


        // 收缩/展开  侧边栏
        handleCollapse() {
            this.isCollapse = !this.isCollapse;
            this.asideWith = this.isCollapse ? '64px' : '210px'
            this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
        },


        // 全屏
        handleFull() {
            document.documentElement.requestFullscreen()
        },


        // 获取所有用户信息
        getAllUsers() {
            this.$request.get('/user/selectAll').then(res => {
                this.users = res.data;    // 这里一个.data就够了，因为request封装res = request.data了
            })
        },


        // 退出登录
        logout() {
            // 清除用户数据
            localStorage.removeItem("account");
            // 清楚浏览器记录
            // localStorage.clear();

            // 提示用户退出登录
            this.$message.success("退出登录成功！")

            // 跳转到登录页面
            this.$router.push("/login")
        }
    },

    created() {
        this.getBreadcrumb();
    }
}
</script>


<style>


.el-menu--inline .el-menu-item {

    background-color: #000c17 !important;

}


.el-menu-item:hover, .el-submenu__title:hover {
    color: #fff !important;;
}


.el-menu-item.is-active {
    background-color: #1890ff !important;
    border-radius: 8px;
    margin: 4px;
}


.el-menu-item, .el-submenu__title {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
}


.el-aside {
    transition: width .3s;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.el-header {
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    display: flex;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.el-form-item .el-input {
    margin-left: 20px;
    width: 80%;
}

/* 隐藏横向滚动条 */
.el-aside::-webkit-scrollbar {

    display: none;

}

.el-table .el-avatar {
    background-color: white;
}


/*隐藏el-table 的滚动条*/
.el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 2px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background: #eee;
}


</style>